<template>
	<view>
		<page-head :title="'验车报告'" :headtype="2"></page-head>
		<view class="card" v-for="(item,index) in problemdata" :key="index">
			<view class="card-name">{{ index+1 }}、{{ item.title }}</view>
			<view class="card-option flex">
				<view class="card-select flex">
					<view class="card-selecticon" :class="item.result == 1 ? 'mainBg':''"></view>
					<view class="card-selecttxt">是</view>
				</view>
				<view class="card-select flex" >
					<view class="card-selecticon" :class="item.result === 0 ? 'mainBg':''"></view>
					<view class="card-selecttxt">否</view>
				</view>
			</view>
			<block v-if="item.result === 0">
				<view class="uploadphoto flex">
					<text class="tn-icon-image" style="margin: auto;font-size:100rpx;color: #999;"></text>
					<image :src="apifun.URLimg + item.img" mode=""></image>
				</view>
				<view class="card-content">
					{{ item.remark }}
				</view>
			</block>
		</view>
		<view class="card-content marginAuto" style="background:#fff;">
			{{ remark }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				problemdata:[],
				doc: '',
				remark:''
			};
		},
		onLoad(opt) {
			this.id = opt.id;
			this.initData()
		},
		methods: {
			initData(){
				this.apifun.unirequest('/api/verifyCart/result','post',{
					order_id:this.id
				},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						let problemdata = [];
						datas.list.forEach((item,index)=>{
							let itemsdata = {
								create_time:item.create_time,
								update_time:item.update_time,
								id:item.id,
								title_id:item.id,
								title:item.title,
								result:item.result,
								remark:item.remark,
								img:item.img
							}
							problemdata.push(itemsdata)
						})
						this.remark = datas.intro;
						this.problemdata =problemdata;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainBg{
		background: #0E71EB !important;
	}
	.card{
		width: 650rpx;
		padding: 20rpx;
		margin: auto;
		box-sizing: border-box;
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
		.card-name{
			font-size: 30rpx;
			font-weight: bold;
			padding-bottom:20rpx;
			border-bottom: 2rpx dashed #EDEDED;
		}
		.card-option{
			.card-select{
				width: 200rpx;
				padding:20rpx 0;
				.card-selecticon{
					width:30rpx;
					height:30rpx;
					border-radius: 50%;
					margin-right:20rpx;
					margin-top:4rpx;
					border: 1px solid #EDEDED;
				}
				.card-selecttxt{
					font-size:30rpx;
					color: #333;
				}
			}
		}
		.uploadphoto{
			position: relative;
			width: 240rpx;
			height: 240rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: #F9F9F9;
			image{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 99;
				width: 240rpx;
				height: 240rpx;
			}
		}
		.card-content{
			width: 690rpx;
			padding:20rpx;
			border-radius: 10rpx;
			background: #F9F9F9;
		}
	}
	.card-content{
		margin-top: 20rpx;
		width: 650rpx;
		padding:20rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
		background: #F9F9F9;
	}
	.enter{
		width: 600rpx;
		margin:60rpx auto 20rpx;
		text-align: center;
		line-height:90rpx;
		border-radius: 20rpx;
		color: #fff;
		font-size: 28rpx;
	}
</style>
